<template>
  <uni-popup ref="popup" type="center" :maskClick="false">
    <view class="read-popup">
      <view class="title">{{title}}</view>
      <scroll-view class="content" scroll-y>
		  <slot></slot>
        <!-- <rich-text :nodes="content"></rich-text> -->
      </scroll-view>
      <view class="footer">
        <button 
          class="confirm-btn" 
          :class="{ 'disabled': countdown > 0 }"
          :disabled="countdown > 0"
          @click="handleConfirm"
        >
          {{ countdown > 0 ? `请阅读完成(${countdown}s)` : '我已阅读' }}
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'

export default {
  name: 'ReadPopup',
  components: {
    uniPopup
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    readTime: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      countdown: 0,
      timer: null
    }
  },
  methods: {
    open() {
      this.$refs.popup.open()
      this.startCountdown()
    },
    close() {
      this.$refs.popup.close()
      this.clearTimer()
    },
    startCountdown() {
      this.countdown = this.readTime
      this.clearTimer()
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          this.clearTimer()
        }
      }, 1000)
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    handleConfirm() {
      if (this.countdown > 0) return
      this.$emit('confirm')
      this.close()
    }
  },
  beforeDestroy() {
    this.clearTimer()
  }
}
</script>

<style lang="scss" scoped>
.read-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .content {
    max-height: 60vh;
    margin-bottom: 30rpx;
  }
  
  .footer {
    text-align: center;
    
    .confirm-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background: #2979ff;
      color: #fff;
      border-radius: 40rpx;
      font-size: 28rpx;
      
      &.disabled {
        background: #ccc;
      }
    }
  }
}
</style>